<template>
  <div class="users-container">
    <h4>用户管理</h4>
    <table class="table table-striped table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">姓名</th>
      <th scope="col">年龄</th>
      <th scope="col">头衔</th>
      <th scope="col">操作</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in data" :key="item.id">
      <th scope="row">{{item.id}}</th>
      <td>{{item.name}}</td>    
      <td>{{item.age}}</td>
      <td>{{item.chenghao}}</td>
      <td>
        <router-link :to="'/home/users/'+item.id">详情</router-link>
      </td>
    </tr>
  
  </tbody>
</table>
  </div>
</template>

<script>
export default {
    name:'MyUsers',
    data(){
        return{
            data:[
                {id:1,name:'嬴政',age:'18',chenghao:'始皇帝',message:'中国的第一个皇帝'},
                {id:2,name:'李斯',age:'35',chenghao:'丞相',message:'中国的第一个丞相'},
                {id:3,name:'吕不韦',age:'50',chenghao:'商人',message:'始皇帝的网传父亲'},
                {id:4,name:'赵姬',age:'48',chenghao:'太后',message:'第一个太后，始皇帝的母亲'},
            ]
        }
    }

}
</script>

<style lang="less" scoped>
.users-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0 10px;
}
</style>